/*
 * 颜色值使用framework7下的iOS主题的几种颜色
 * 红色 #ff3b30
 * 绿色 #4cd964
 * 蓝色 #2196f3
 * 粉色 #ff2d55
 * 黄色 #ffcc00
 * 橘色 #ff9500
 * 灰色 #8e8e93
 * 黑色 #000000
*/

@font-face {
    font-family: FangzhengRZY;
    src: url("fonts/FZRuiZYJW_Da.ttf");
}

@font-face {
    font-family: Roboto;
    src: url("fonts/Roboto-Bold.ttf");
}

html {
    font-family: Roboto;
}

/* Apple watch */
.watch {
    background-color: rgba(0, 0, 0, 1);
    border-radius: 25px;
    box-shadow: 0 0 2px 5px rgba(0, 0, 0, .75), 1px 1px 3px 7px rgba(128, 128, 128, .25);
    width: 200px;
    height: 200px;
    position: fixed;
    left: 50%;
    margin-left: -100px;
    top: 50%;
    margin-top: -100px;
    overflow: hidden;
}

.watch--big {
    width: 300px;
    height: 300px;
    margin-left: -150px;
    margin-top: -150px;
    border-radius: 30px;
}

::-webkit-scrollbar {
    width: 2px;
    background-color: rgba(60, 60, 60);
}

/* 基础指针 */
.pointers {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.hour-pointer,
.minute-pointer,
.second-pointer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: 0 50%;
    box-sizing: border-box;
}

.hour-pointer:before,
.hour-pointer:after,
.minute-pointer:before,
.minute-pointer:after,
.second-pointer:before,
.second-pointer:after {
    content: '';
    display: inline-block;
    position: absolute;
    background-color: rgba(255, 255, 255, .95);
    border-radius: 1000px;
    box-sizing: border-box;
}

/* 默认指针 - 要修改直接覆盖 */
.hour-pointer {
    width: 20%;
    height: 6px;
    margin-top: -3px;
}

.hour-pointer:before {
    width: 20%;
    height: 3px;
    left: 0;
    top: 50%;
    margin-top: -1.5px;
}

.hour-pointer:after {
    width: 80%;
    height: 100%;
    left: 20%;
}

.minute-pointer {
    width: 35%;
    height: 6px;
    margin-top: -3px;
}

.minute-pointer:before {
    width: 10%;
    height: 3px;
    left: 0;
    top: 50%;
    margin-top: -1.5px;
}

.minute-pointer:after {
    width: 90%;
    height: 100%;
    left: 10%;
}

.second-pointer {
    width: 40%;
    height: 2px;
    margin-top: -1px;
    border-radius: 1000px;
    background-color: #ff9500;
}

.second-pointer:before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    left: -3px;
    top: 50%;
    margin-top: -3px;
    background: radial-gradient(circle, #000 30%, 30%, #ff9500 100%);
}

.second-pointer:after {
    width: 18%;
    height: 2px;
    left: -20%;
    background-color: inherit;
}

/* 表盘刻度线 */
.point-line {
    position: absolute;
    min-width: 1px;
    min-height: 1px;
    margin-left: -0.5px;
    margin-top: -0.5px;
    background-color: #fff;
    transform-origin: 50% 50%;
    border-radius: 1000px;
}

.point-text{
    color: #333;
    font-size: 8px;
    position: absolute;
    transform: translate(-50%, -50%);
}

/* app - todo */
.todo__radio {
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #2196f3;
    position: relative;
    cursor: pointer;
    outline: none;
    margin: 0;
}

.todo__radio:after {
    content: "";
    display: inline-block;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -40%;
    margin-top: -40%;
    box-sizing: border-box;
    background-color: #2196f3;
    opacity: 0;
    transform: scale(0.2);
    -webkit-transform: scale(0.2);
    transition: all .3s;
    -webkit-transition: all .3s;
}

.todo__radio[checked]:after,
.todo__radio--checked:after {
    transition: all .3s;
    -webkit-transition: all .3s;
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
}

.todo__radio--medium {
    width: 40px;
    height: 40px;
}

.todo__radio--large {
    width: 60px;
    height: 60px;
}

.todo__radio--pink {
    border-color: #ff2d55;
}

.todo__radio--pink:after {
    background-color: #ff2d55;
}

.todo__item {
    display: flex;
    align-items: flex-start;
    background-color: rgba(60, 60, 60, .6);
    border-radius: 8px;
    padding: 5px;
    cursor: pointer;
    margin-bottom: 7px;
    user-select: none;
}

.todo__item.done {
    filter: brightness(0.7);
}

.todo__item:hover {
    background-color: rgba(60, 60, 60, .5);
}

.todo__item__inner {
    color: #eee;
    margin-left: 7px;
}

.todo__time {
    color: #ccc;
    font-size: 14px;
}